<template>
  <div class="videos-list-page">
    <div class="gp-filter">
      <div class="mk-cus-ddl">
        <span class="cur">最受欢迎</span>
        <div class="sub-dd-block">
          <ul class="sub-ddls">
            <li><a>全部</a></li>
            <li><a>游戏</a></li>
            <li><a>作品</a></li>
            <li><a>截图</a></li>
            <li><a>短视频</a></li>
          </ul>
        </div>
      </div>
      <div class="seach-bx">
        <form @submit.prevent="() => { return false }">
          <input type="text" :class="{ 'active': isFocus }" @focus="isFocus = true" @blur="isFocus = false"
            placeholder="按标题/风格/类型等搜索 1,789 款短视频" v-model="queryParams.title" @keypress.enter="handleSearch" />
        </form>
      </div>
      <div class="bs-layout">
        <div class="plat-items">
          <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
              <i class="sm-tip" slot-content>大图模式</i>
                <span slot="reference" class="f-layout" :class="{'active':model=='big'}" @click="model='big'"></span>
            </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                <i class="sm-tip" slot-content>小图模式</i>
                <span slot="reference" class="mup-layout" :class="{'active':model=='small'}" @click="model='small'"></span>
            </el-popover>
        </div>
      </div>
      <div class="bs-g-flabel">
        <span class="cur">筛选</span>
        <div class="games-filter gpic-flt" style="width:546px">
          <div class="games-filter-wrap">
            <div class="filter-search">
              <form><input type="text" v-model="keyword" placeholder="搜索分类" /><i v-if="keyword" class="clear-key-btn"
                  @click="keyword = ''"></i></form>
            </div>
            <div class="filter-g-tab">
              <span :class="index == 0 ? 'active' : ''" v-for="(item, index) in gTypesT">{{ item }}</span>
            </div>
            <div class="gft-data-box">
              <div class="tip-top">登录界面</div>
              <ul class="data-ul">
                <li v-for="(type, i) in gTypes" :key="i" @click="type.selected = !type.selected" v-if="type.title != '全部'"><a
                    :class="{ 'active': type.selected }">{{ type.title }}</a></li>
              </ul>
            </div>
            <div class="gft-data-box">
              <div class="tip-top">主界面</div>
              <ul class="data-ul">
                <li v-for="(type, i) in gTypes1" :key="i" @click="type.selected = !type.selected" v-if="type.title != '全部'">
                  <a :class="{ 'active': type.selected }">{{ type.title }}</a></li>
              </ul>
            </div>
            <div class="gft-data-box">
              <div class="tip-top">选项设置</div>
              <ul class="data-ul">
                <li v-for="(type, i) in gTypes2" :key="i" @click="type.selected = !type.selected" v-if="type.title != '全部'">
                  <a :class="{ 'active': type.selected }">{{ type.title }}</a></li>
              </ul>
            </div>
            <div class="gft-data-box">
              <div class="tip-top">系统提示</div>
              <ul class="data-ul">
                <li v-for="(type, i) in gTypes3" :key="i" @click="type.selected = !type.selected" v-if="type.title != '全部'">
                  <a :class="{ 'active': type.selected }">{{ type.title }}</a></li>
              </ul>
            </div>

            <div class="bot-btns">
              <a class="cancel" @click="handleCancelByGtypeAll">全部取消</a>
              <a class="confirm" @click="handleConfirmByGTypeSearch">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul class="games-data" :class="[model]">
      <li v-for="(item, idx) in list" :key="idx" class="dx-vd-item"  @click="currentItem=item;showPlay=true">
        <div class="main-box">
          <img loading="lazy" :src="item.image" alt="">
          <span class="play-icon"></span>
        </div>
        <!-- <div class="global-img-fun-pos">
          <a class="hid-el fav-btn" @click.stop="item.selected = true; showFav = true"></a>
          <a class="hid-el global-parise-btn">0</a>
        </div>
        <a class="hid-el select-btn" :class="{ active: item.selected }" @click="item.selected = !item.selected"></a> -->
        <div class="con-mask hid-el"></div>
        <a class="title hid-el">{{ item.title }}</a>
      </li>
    </ul>

    <PlayVideo v-if="showPlay" :data="currentItem" @close="showPlay=false"/>

    <!-- <transition name="fade"> -->
    <gameInfo @close="onInfoClose" v-if="showInfo" :id="currentId" />
    <!-- </transition> -->
  </div>
</template>

<script>
import PlayVideo from '@/components/playvideo'
import pswiper from '@/components/pswiper'
import moment from 'moment'
import gameInfo from '@/components/gameInfo'
import api from '@/api/api'
export default {
  components: { gameInfo, pswiper,PlayVideo},
  data() {
    return {
      currentItem:{},
      showPlay:false,
      gTypesT: ['常用基础', '游戏角色', '游戏内容', '玩家'],
      gTypes: [{ selected: false, title: "标题界面" }, { selected: false, title: "登录注册" }, { selected: false, title: "服务器选择" }, { selected: false, title: "角色创建" }],
      gTypes1: [{ selected: false, title: "主菜单" }, { selected: false, title: "游戏公告" }, { selected: false, title: "关卡选择" }, { selected: false, title: "备战界面" }, { selected: false, title: "大厅" }],
      gTypes2: [{ selected: false, title: "画面" }, { selected: false, title: "声音" }, { selected: false, title: "操作" }, { selected: false, title: "账户" }, { selected: false, title: "其他" }],
      gTypes3: [{ selected: false, title: "转场" }, { selected: false, title: "载入画面" }, { selected: false, title: "进度条" }, { selected: false, title: "加载保存" }, { selected: false, title: "下载进度" }, { selected: false, title: "副本排队" }],
      isFocus: false,
      model: 'small',
      currentId: '',
      showInfo: false,
      keyword: '',
      gTypes: [],
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 35
      },
      total: 0,
      hasMore: true,
      scrollLoaded: false,
      allCates: [],
      curAllCateKey: '',
      curCates: [],
      curFullPath: ''
    }
  },
  destroyed() {
    $(document).unbind('scroll')
  },
  async mounted() {
    let start = new Date();
    let starttime = moment(start).format('YYYY-MM-DD');
    let end = new Date(start.setDate(start.getDate() + 1));
    let endtime = moment(end).format('YYYY-MM-DD')
    let res = await api.articlelist({ orderByColumn: 'see', isAsc: 'desc', startTime: starttime, endTime: endtime, pageNum: 1, pageSize: 8 })

    this.curFullPath = this.$route.fullPath;

    let _gTypes = localStorage.getItem('G-TYPES')
    _gTypes = JSON.parse(decodeURIComponent(_gTypes))
    this.gTypes = _gTypes

    let _allCates = JSON.parse(decodeURIComponent(localStorage.getItem('CATE-ALL-TYPES')))
    this.curAllCateKey = _allCates[1].key
    this.curCates = _allCates[1].result
    this.allCates = _allCates
    this.queryList()

    let that = this
    $(document).on('scroll', function (e) {
      if (that.showInfo) return
      let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight

      if (that.scrollLoaded == false) return
      if (jHeight <= 200 && that.hasMore) {
        that.scrollLoaded = false
        that.handleLoadingMore()
      }
    })
  },
  methods: {
    handleCancelByGtypeAll() { },
    handleConfirmByGTypeSearch() { },
    chooseByCate(_item) {
      this.queryParams.categoryIds = _item.value;
      this.queryParams.pageNum = 1;
      this.list = [];
      this.scrollLoaded = false;
      this.hasMore = true;
      this.queryList();
    },
    chooseDevice(_device) {
      this.queryParams.device = _device == this.queryParams.device ? '' : _device;;
      this.queryParams.pageNum = 1;
      this.list = [];
      this.scrollLoaded = false;
      this.hasMore = true;
      this.queryList();
    },
    handleSearch(e) {
      if(e)e.target.blur();
      this.queryParams.pageNum = 1;
      this.list = [];
      this.scrollLoaded = false;
      this.hasMore = true;
      this.queryList();
    },
    chooseScreen(_screen) {
      this.queryParams.orientation = _screen == this.queryParams.orientation ? '' : _screen;

      this.queryParams.pageNum = 1;
      this.list = [];
      this.scrollLoaded = false;
      this.hasMore = true;
      this.queryList();
    },
    onInfoClose() {
      window.history.pushState({}, 0, this.curFullPath);
      document.body.style.overflow = 'inherit';
      this.showInfo = false;
    },
    handleShowInfo(_item) {
      window.history.pushState({}, 0, '/game/' + _item.id);
      this.currentId = _item.id;
      document.body.style.overflow = 'hidden';
      this.showInfo = true;
    },
    handleCancelAllCate() {
      this.allCates.map((item) => {
        item.result.map((cate) => {
          cate.checked = false
        })
      })
      this.$forceUpdate()
    },
    handleConfirmSelectCate() {
      let datas = this.allCates.filter((r) => {
        return r.key == 'theme'
      })[0].result;

      let tags = [];
      datas.map(item => {
        if (item.checked) {
          tags.push(item.title);
        }
      })
      datas = this.allCates.filter((r) => {
        return r.key == 'style'
      })[0].result;

      let style = '';
      datas.map(item => {
        if (item.checked) {
          style = item.title;
        }
      })

      let categoryIds = [];
      datas = this.allCates.filter((r) => {
        return r.key == 'categoryThirdId'
      })[0].result;
      datas.map(item => {
        if (item.checked) {
          categoryIds.push(item.id);
        }
      })

      datas = this.allCates.filter((r) => {
        return r.key == 'era'
      })[0].result;

      let era = '';
      datas.map(item => {
        if (item.checked) {
          era = item.title;
        }
      })

      this.queryParams.tags = tags;
      this.queryParams.style = style;
      this.queryParams.categoryIds = categoryIds;
      this.queryParams.era = era;
      this.queryParams.pageNum = 1;
      this.list = [];
      this.scrollLoaded = false;
      this.hasMore = true;
      this.queryList();
    },
    chooseCate(_cate) {
      if (this.curAllCateKey == 'style' || this.curAllCateKey == 'era') {
        if (_cate.checked) {
          _cate.checked = !_cate.checked;
        }
        else {
          this.curCates.map(item => {
            item.checked = false;
          })
          _cate.checked = true;
        }
        this.$forceUpdate()
        return;
      }
      if (_cate.checked) {
        _cate.checked = !_cate.checked;
      } else {
        _cate.checked = !_cate.checked
      }

      this.$forceUpdate()
    },
    chooseCateByKey(_key) {
      this.curAllCateKey = _key
      this.curCates = this.allCates.filter((r) => {
        return r.key == _key
      })[0].result
    },
    handleLoadingMore() {
      this.queryParams.pageNum++
      this.queryList()
    },
    async queryList() {
      var that = this

      let result = await api.videoList(that.queryParams)

      let old = that.list

      that.list = [...old, ...result.data]

      that.total = result.total

      let totalPage = result.total % that.queryParams.pageSize == 0 ? result.total / that.queryParams.pageSize : parseInt(result.total / that.queryParams.pageSize) + 1
      if (result.data && (result.data.length < that.queryParams.pageSize || that.queryParams.pageNum >= totalPage)) {
        that.hasMore = false
      } else {
        that.hasMore = true
      }
      that.scrollLoaded = true
    },
    version(time) {
      let date = new Date(time)
      return date.getTime()
    },
    handleGmCatePrev() {
      this.gmswiper.slidePrev()
    },
    handleGmCateNext() {
      this.gmswiper.slideNext()
    },
  },
}
</script>

<style lang="less">
.videos-list-page {
  .gp-filter {
    position: sticky;
    top: 149px;
    // z-index:1;
    // margin-top:20px;
    // padding-top:10px;
    // margin-bottom:21px;
    padding-bottom: 21px;
    padding-top: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .games-data {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    grid-gap: 20px;

    .dx-vd-item {
      // width:312px !important;
      height: 175px;
      // min-width:312px;
      border-radius: 16px;
      overflow: hidden;
      // margin-right:20px;
      position: relative;
      cursor: pointer;
      border:2px solid transparent;

      transition:.2s all linear;
      .hid-el {
        // display: none;
        opacity: 0;
      }

      &:hover {
        border-color: #11CCB1;
        cursor: pointer;

        a {
          >img {
            transform: scale(1.08);
          }
        }

        .hid-el {
          // display: inline-block;
          opacity: 1;

          transition: 0.1s all linear;
        }
      }

      .play-icon {
        background: url('../../assets/pro/home_v_play.svg') no-repeat;
        background-position: center center;
        display: inline-block;
        width: 80px;
        height: 80px;
        position: absolute;
        z-index:1;
        left: calc((100% - 80px) / 2);
        top: calc((100% - 80px) / 2);
      }

      .con-mask {
        height: 129px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        cursor: default;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      }
      
      .global-img-fun-pos{
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .select-btn {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 10px;
        top: 10px;
        background: url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
        background-size: cover;
        &.active {
        background: url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
        background-size: cover;
        }
    }

      .main-box {
        display: inline-block;
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .title {
        background: url('../../assets/pro/icon_video_transfer.svg') no-repeat;
        background-position: left center;
        background-size: 16px 16px;
        position: absolute;
        bottom: 11px;
        padding-left: 20px;
        left: 14px;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}
</style>